<template>
	<div>
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120" v-model='content'></textarea>
		<mt-button type='primary' size='large' @click='postComment'>发表评论</mt-button>

		<div class="cmt-list" v-for='(item, i) in comment' :key='item.id'>
			<div class="cmt-item">
				<div class="cmt-title">
					第{{i + 1}}楼&nbsp;&nbsp;用户：{{item.name}}&nbsp;&nbsp;发表时间：{{item.time | dateFormat}}
				</div>
				<div class="cmt-body">
					{{item.comment == 'undifined' ? '此用户很懒，啥也没说' : item.comment}}
				</div>
			</div>
		</div>

		<mt-button type='danger' size='large' plain @click='getMore'>加载更多</mt-button>
	</div>
</template>

<script type="text/javascript">
	import { Button, Toast } from 'mint-ui';
	export default{
		data() {
			return {
				id: 0,
				page: 1,
				comment: [],
				content: ''
			}
		},
		components: {
			'mt-button': Button
		},
		methods: {
			getComment() {
				this.$http.get(`home/newsInfo/comment?id=${this.id}&page=${this.page}`)
				.then(function (data) {
					this.comment = this.comment.concat(JSON.parse(data.body.resBody.data));
				})
			},
			getMore() {
				this.page ++;
				this.getComment();
			},
			postComment() {
				this.$http.post(`home/newsInfo/postComment`, {id:this.id, content: this.content}, { emulateJSON: true })
				.then(function (data) {
					Toast({
						message: '发表成功',
						position: 'middle',
						duration: 3000
					});
					this.comment = [];
					this.getComment();
				}, function (err) {
					console.log(err)
				})
			}
		},
		created() {
			this.id = this.$route.query.id;
			this.getComment();
		}
	}
</script>

<style lang="less" scoped>
	h3{
		font-size: 18px;
	}
	textarea{
		font-size: 14px;
		margin: 0;
		height: 85px;
	}
	.mint-button{
		font-size: 16px;
		padding: 3px 12px;
	}
	.cmt-list{
		margin: 5px 0;
		.cmt-item{
			font-size: 13px;
			.cmt-title{
				line-height: 30px;
				background-color: skyblue;
			}
			.cmt-body{
				line-height: 35px;
				text-indent: 2em;
			}
		}
	}
</style>